<template>
  <div>
    <Header1></Header1>

    <jobClassify></jobClassify>
    <div style="margin-top: 30px;width: 650px;margin-left: 550px">
      <el-input placeholder="搜索职位" v-model="positionName" class="input-with-select" >
        <el-select v-model="selectType" slot="prepend" placeholder="请选择" style="width: 100px">
          <el-option label="搜职位" value="1"></el-option>
          <el-option label="搜公司" value="2"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="selectPosition"></el-button>
      </el-input>

      <!--<div id="search_box">-->
        <!--<form id="searchForm" name="searchForm" action="list.html" method="get">-->
          <!--<ul name="" id="searchType">-->
            <!--<li data-searchtype="1" class="type_selected">职位</li>-->
          <!--</ul>-->
          <!--&lt;!&ndash;<div class="searchtype_arrow"></div>&ndash;&gt;-->
          <!--<input type="text" id="search_input" name = "kd"  tabindex="1" value=""  placeholder="请输入职在·位名称，如：产品经理"  />-->
          <!--<button type="submit" id="search_button" style="display: inline-block">搜索</button>-->
        <!--</form>-->
      <!--</div>-->
      <div style="margin-top: 40px">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in imgList" :key="item.name">
          <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title" />
        </el-carousel-item>

      </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
  import Header1 from "../header/Header"
  import jobClassify from "./index_jpbClassify/index_jobClassify"
  // import indexImage from "../index_image/IndexImage"

  export default {
    name: "index",
    data(){
      return{
        positionName:'',
        selectType:'',
        imgList: [
          {
            name: "lj",
            src: require("@/assets/lun1.jpg"),
            title: "这是lj.png"
          },
          {
            name: "logo",
            src: require("@/assets/lun2.jpg"),
            title: "这是logo.png"
          },
          {
            name: "bg",
            src: require("@/assets/lun3.jpg"),
            title: "这是bg.png"
          },
          {
            name: "sadmas",
            src: require("@/assets/lun4.jpg"),
            title: "这是sadmas.png"
          }
        ],
      }
    },
    components: {
      Header1,
      jobClassify,
      // job
    },
    methods: {
      selectPosition (){

        if(this.selectType==1){
          //查用户。跳转到职位页面。
          this.$router.push({
            path:'positionSelect',
            query:{positionName:this.positionName}
          })
        }
        if(this.selectType==2){
          //查用户。跳转到职位页面。
          this.$router.push({
            path:'positionSelect',
            query:{companyName:this.positionName}
          })
        }
      }
    }
  }
</script>

<style scoped>
  #search_box{width:744px;height:41px; position:relative;}
  #search_input{border:2px solid #747778;border-right:none;width:574px; height:23px; line-height:23px;float:left;font-size:16px;padding:7px 8px;margin:0;}
  #search_button{height:41px;width:152px; color:#FFF; font-size:18px;border:none;background:#747778;float:right; cursor:pointer;}
  #search_button:hover{background:#616364;}
  #search_box{border:2px solid #019875;width:740px;height:37px; position:relative;}
  #search_input{width:476px; height:23px; line-height:23px;float:left;font-size:16px;padding:7px 8px 7px 10px;margin:0 0 0 94px;border:0;}
  #search_button{height:37px;width:152px; color:#FFF; font-size:18px;border:none;background:#019875;float:right; cursor:pointer;}
  #search_button:hover{background:#028b6b;}
  #searchType{cursor:pointer;position:absolute;list-style:none;padding:0;margin:0;width:98px;background:#fff;left:-2px;top:0;}
  #searchType li{font-size:16px;height:23px;line-height:24px;padding:7px 22px;border:2px solid #91cebe;display:none;}
  #searchType li.type_selected{height:23px;border-left:2px solid #019875;border-right:2px solid #019875;border-top:0;border-bottom:0;display:block;}
  .searchtype_arrow{ height:0;width:0;overflow: hidden;font-size: 0;line-height: 0; border-width:5px 5px 0; border-style:solid dashed; border-color:#019875 transparent transparent;-webkit-transition:all 0.4s ease 0s;-moz-transition:all 0.4s ease 0s;-ms-transition:all 0.4s ease 0s;transition:all 0.4s ease 0s; position:absolute; top:18px;left:73px;}
  .searchtype_arrow.transform{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform: rotate(180deg);-webkit-transition:all 0.4s ease 0s;-moz-transition:all 0.4s ease 0s;-ms-transition:all 0.4s ease 0s;transition:all 0.4s ease 0s;}

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }


  .search-form {
    height: 50px;
    position: relative;
    zoom: 1;
    z-index: 1000;
  }
  .column-search-panel .search-form-con {
    width: 794px;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.13);
  }
  .search-form-con {
    float: left;
    width: 504px;
  }

  .position-sel {
    display: block;
    width: 68px;
    height: 28px;
    border: 1px solid #53cac3;
    border-top-color: rgb(83, 202, 195);
    border-right-color: rgb(83, 202, 195);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgb(83, 202, 195);
    border-left-color: rgb(83, 202, 195);
    border-left-style: solid;
    border-left-width: 1px;
    border-left: none;
    border-right: none;
    border-right-color: currentcolor;
    line-height: 30px;
    float: right;
    padding: 6px 15px 8px 15px;
    padding-top: 6px;
    padding-bottom: 8px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
  }
  .position-sel .label-text {
    width: 52px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
  }
  .search-form .ipt-wrap {
    background: #fff;
    border: 1px solid #53cac3;
    border-top-color: rgb(83, 202, 195);
    border-right-color: rgb(83, 202, 195);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgb(83, 202, 195);
    border-left-color: rgb(83, 202, 195);
    border-left-style: solid;
    border-left-width: 1px;
    border-left: none;
    border-left-color: currentcolor;
    border-right: none;
    border-right-color: currentcolor;
    height: 42px;
    overflow: hidden;
  }
  .ipt-wrap {
    position: relative;
  }
  .ipt-search {
    width: 203px;
    height: 28px;
    line-height: 30px;
    padding: 7px 15px;
    border: 0;
    font-size: 13px;
    color: #414a60;
  }

  .btn-search {
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    background: #55cbc4;
    background-color: rgb(85, 203, 196);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-image: none;
    border: 0;
    cursor: pointer;
    font-size: 0;
    width: 90px;
    padding: 0;
    min-width: 0;
    background-position: 34px -138px;
    min-width: 0;
  }
</style>